<template>
    <el-dialog
        title="录音"
        :append-to-body="true"
        :visible.sync="visible"
        width="500px"
        :close-on-click-modal="false"
        :before-close="handleClose"
    >
        <div v-if="visible" id="waveform" v-loading="loading"></div>
        <!-- <div v-if="visible" id="waveformTimeline"></div> -->
        <div class="text-center ">
           
                {{ currentTime | format }} / {{ audioDuration | format }}
           
        </div>
        <div slot="footer" class="d-flex ju-between">
            <div></div>
            <div class="">
                <el-button @click="forward" type="primary" style="font-size: 16px;padding: 4px 15px;">前进5s</el-button>
                <el-button @click="pauseAndPlay" type="primary" :icon="isPlay ? 'el-icon-video-pause' : 'el-icon-video-play'" circle style="font-size: 24px;padding: 4px;"></el-button>
                <el-button @click="back" type="primary" style="font-size: 16px;padding: 4px 15px;">后退5s</el-button>
            </div>
            <div>
                <el-button @click="handleClose"> 关闭 </el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import moment from "moment";
import service from "@/service";
import WaveSurfer from "wavesurfer.js";
import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.js' 
export default {
    name: "ComAudio",

    data() {
        return {
            visible: false,
            wavesurfer: null,
            loading: false,
            // audioPath: null
            isPlay: false,
            currentTime: 0, // 当前播放时间
            audioDuration: 0,
        };
    },
    filters: {
		// 时间格式化
		format(value) {
			if (isNaN(value)) {
				value = 0
			}
			const minute = Math.floor(value / 60)
			const second = Math.floor(value % 60)
			function addZero(s) {
				return s < 10 ? '0' + s : s
			}
			return `${addZero(minute)}:${addZero(second)}`
		}
	},
    methods: {
        async fileExist(id) {
            const data = { id: id,startTime:moment().format("YYYY-MM-DD HH:mm:ss") };
            const result = await service("isFileExist", {
                data,
                noMessageTips: true,
            });
            return result.result;
        },
        handlePlay(id, startTime, serialId) {
            if (!id) {
                this.$message.warning("没有语音流水号！");
                return;
            }

            this.loading = true;
            this.visible = true;

            this.$nextTick(() => {
                this.wavesurfer = WaveSurfer.create({
                    container: "#waveform",
                    waveColor: "#f0f0f0",
                    progressColor: "#00a2ca",
                    responsive: true,
                    plugins: [
                        // Timeline.create({
                        //     container: "#waveformTimeline"
                        // })
                    ]
                });
                this.wavesurfer.on("ready", () => {
                    this.audioDuration = this.wavesurfer.getDuration()
                    this.pauseAndPlay();
                });
                this.wavesurfer.on('finish', () => {
                    this.pauseAndPlay();
                })
                this.wavesurfer.on("error", (err) => {
                    console.log("err", err);
                });
                this.wavesurfer.on('audioprocess', v => {
				this.currentTime = v
			})

                // '9e81911f-3632-4f3f-80ff-e05d0ec67c84'
                service("playAudio", {
                    params: {
                        id,
                        startTime,
                        serialId,
                    },
                    noErrorMessageTip: true
                })
                    .then((response) => {
                        this.wavesurfer.loadBlob(response);

                        this.loading = false;
                    })
                    .catch(() => {
                        this.loading = false
                        this.$message.error("录音流水有误，无法播放录音！")
                    });
            });
        },
        pauseAndPlay() {
            
            if(!this.wavesurfer) return;
            if(this.isPlay){
                this.wavesurfer.pause()
                this.isPlay = false;
            }else {
                this.wavesurfer.play();
                this.isPlay = true;
            }
        },
        forward(){
             if(!this.wavesurfer) return;
              this.wavesurfer.skip(5);
        },
        back(){
             if(!this.wavesurfer) return;
              this.wavesurfer.skip(-5);
        },
        handleClose() {
            this.wavesurfer.destroy();
            this.wavesurfer = null;
            this.visible = false;
        },
    },
};
</script>

